<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML PPT - 路演展示</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- PPT容器 -->
    <div class="ppt-container">
        
        <!-- 第一页：问题与场景 -->
        <div class="slide slide-1 active" id="slide-1">
            <div class="slide-content">
                <div class="slide-header">
                    <h1 class="slide-title editable" data-field="title-1">HTML PPT 快速生成器</h1>
                    <p class="slide-subtitle editable" data-field="subtitle-1">专为黑客松路演设计的PPT解决方案</p>
                </div>
                <div class="slide-body">
                    <div class="main-content">
                        <div class="text-area">
                            <h2 class="section-title editable" data-field="section-title-1">为什么做它？</h2>
                            <div class="text-content editable" data-field="text-content-1">
                                <div class="content-item">
                                    <span class="content-icon">🏆</span>
                                    <div class="content-text">
                                        <h3>黑客松比赛的真相</h3>
                                        <p>4小时极限开发时间有限，做出来的产品都差不多，真正拉开差距的是你用产品讲的故事。</p>
                                    </div>
                                </div>
                                <div class="content-item">
                                    <span class="content-icon">⚡</span>
                                    <div class="content-text">
                                        <h3>快速展示核心要点</h3>
                                        <p>路演团队需要一个工具来快速生成专业PPT，突出项目亮点和解决方案。</p>
                                    </div>
                                </div>
                                <div class="content-item">
                                    <span class="content-icon">🎨</span>
                                    <div class="content-text">
                                        <h3>版式统一，内容自由</h3>
                                        <p>提供最高级、最美观的PPT版式，用户只需专注于内容创作，无需担心设计问题。</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="interactive-components">
                        <div class="component-gallery">
                            <div class="gallery-header">应用场景</div>
                            <div class="gallery-content">
                                <div class="gallery-item active" data-index="0">
                                    <div class="gallery-text-content">
                                        <h4>🚀 黑客松比赛</h4>
                                        <p>快速生成专业路演PPT，突出项目核心价值</p>
                                    </div>
                                </div>
                                <div class="gallery-item" data-index="1">
                                    <div class="gallery-text-content">
                                        <h4>💼 产品发布</h4>
                                        <p>标准化展示框架，确保信息传达的一致性</p>
                                    </div>
                                </div>
                                <div class="gallery-item" data-index="2">
                                    <div class="gallery-text-content">
                                        <h4>🎯 项目汇报</h4>
                                        <p>三页结构涵盖问题、方案、总结的完整逻辑</p>
                                    </div>
                                </div>
                            </div>
                            <div class="gallery-controls">
                                <button class="gallery-btn prev">‹</button>
                                <div class="gallery-indicators">
                                    <span class="indicator active" data-index="0"></span>
                                    <span class="indicator" data-index="1"></span>
                                    <span class="indicator" data-index="2"></span>
                                </div>
                                <button class="gallery-btn next">›</button>
                            </div>
                        </div>
                        <div class="expandable-widget">
                            <div class="widget-header">
                                <span class="widget-title">设计理念</span>
                                <button class="expand-btn" onclick="toggleExpand(this)">🔍</button>
                            </div>
                            <div class="widget-content">
                                <div class="tech-highlight">
                                    <h4>🎨 科技风格</h4>
                                    <p>暗色主题配合亮绿色高光，打造未来感视觉体验</p>
                                </div>
                                <div class="tech-highlight">
                                    <h4>🔄 齿轮动画</h4>
                                    <p>以右上角为中心的3D转动切换效果</p>
                                </div>
                                <div class="tech-highlight">
                                    <h4>📐 智能布局</h4>
                                    <p>2x2网格系统，左侧文本右侧交互完美平衡</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 第二页：解决方案与演示 -->
        <div class="slide slide-2" id="slide-2">
            <div class="slide-content">
                <div class="slide-header">
                    <h1 class="slide-title editable" data-field="title-2">我们的解决方案</h1>
                    <p class="slide-subtitle editable" data-field="subtitle-2">做了什么，怎么用</p>
                </div>
                <div class="slide-body">
                    <div class="main-content">
                        <div class="text-area">
                            <h2 class="section-title editable" data-field="section-title-2">核心功能</h2>
                            <div class="text-content editable" data-field="text-content-2">
                                <div class="content-item">
                                    <span class="content-icon">📱</span>
                                    <div class="content-text">
                                        <h3>标准化PPT-HTML</h3>
                                        <p>完美的PPT体验：内容限制在浏览器边界内，无滚动条，支持键盘、鼠标、触摸屏导航。</p>
                                    </div>
                                </div>
                                <div class="content-item">
                                    <span class="content-icon">🔄</span>
                                    <div class="content-text">
                                        <h3>齿轮转动动画</h3>
                                        <p>以右上角为中心的3D切换效果，所有页面逆时针排布，向下翻页如齿轮转动。</p>
                                    </div>
                                </div>
                                <div class="content-item">
                                    <span class="content-icon">🎯</span>
                                    <div class="content-text">
                                        <h3>智能交互组件</h3>
                                        <p>右上角支持2-5个子页面切换，右下角可展开至半屏显示，充分利用HTML交互优势。</p>
                                    </div>
                                </div>
                                <div class="content-item">
                                    <span class="content-icon">🤖</span>
                                    <div class="content-text">
                                        <h3>AI友好设计</h3>
                                        <p>详细操作手册，明确可修改和禁止修改区域，完美支持Claude、Qwen等AI工具。</p>
                                    </div>
                                </div>
                            </div>
                            <div class="demo-section">
                                <button class="demo-button" onclick="openDemo()">
                                    <span class="demo-icon">🚀</span>
                                    <span>查看在线演示</span>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="interactive-components">
                        <div class="component-gallery">
                            <div class="gallery-header">功能亮点</div>
                            <div class="gallery-content">
                                <div class="gallery-item active" data-index="0">
                                    <div class="gallery-text-content">
                                        <h4>🎨 科技风设计</h4>
                                        <p>暗色主题+亮绿色高光<br/>立体阴影+扫描动画<br/>专业级视觉体验</p>
                                    </div>
                                </div>
                                <div class="gallery-item" data-index="1">
                                    <div class="gallery-text-content">
                                        <h4>📐 2x2网格布局</h4>
                                        <p>顶部标题区域<br/>左侧文本+右侧交互<br/>完美的信息层次</p>
                                    </div>
                                </div>
                                <div class="gallery-item" data-index="2">
                                    <div class="gallery-text-content">
                                        <h4>📱 全平台适配</h4>
                                        <p>桌面+平板+手机<br/>响应式设计<br/>一次制作，处处可用</p>
                                    </div>
                                </div>
                            </div>
                            <div class="gallery-controls">
                                <button class="gallery-btn prev">‹</button>
                                <div class="gallery-indicators">
                                    <span class="indicator active" data-index="0"></span>
                                    <span class="indicator" data-index="1"></span>
                                    <span class="indicator" data-index="2"></span>
                                </div>
                                <button class="gallery-btn next">›</button>
                            </div>
                        </div>
                        <div class="expandable-widget">
                            <div class="widget-header">
                                <span class="widget-title">技术特色</span>
                                <button class="expand-btn" onclick="toggleExpand(this)">🔍</button>
                            </div>
                            <div class="widget-content">
                                <div class="tech-highlight">
                                    <h4>📦 纯前端技术栈</h4>
                                    <p>HTML + CSS + JavaScript，无需构建工具，直接运行</p>
                                </div>
                                <div class="tech-highlight">
                                    <h4>🚀 极简部署</h4>
                                    <p>支持GitHub Pages、Vercel等静态托管平台</p>
                                </div>
                                <div class="tech-highlight">
                                    <h4>🔧 高度可定制</h4>
                                    <p>CSS变量控制主题，AI操作手册指导修改</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 第三页：总结与展望 -->
        <div class="slide slide-3" id="slide-3">
            <div class="slide-content">
                <div class="slide-header">
                    <h1 class="slide-title editable" data-field="title-3">总结与展望</h1>
                    <p class="slide-subtitle editable" data-field="subtitle-3">让每个团队都能快速制作专业PPT</p>
                </div>
                <div class="slide-body">
                    <div class="main-content">
                        <div class="text-area">
                            <h2 class="section-title editable" data-field="section-title-3a">我们做到了什么</h2>
                            <div class="text-content editable" data-field="text-content-3a">
                                <div class="content-item">
                                    <span class="content-icon">✅</span>
                                    <div class="content-text">
                                        <h3>完整的PPT解决方案</h3>
                                        <p>三页标准结构，科技风设计，齿轮转动动画，完美的PPT体验。</p>
                                    </div>
                                </div>
                                <div class="content-item">
                                    <span class="content-icon">🚀</span>
                                    <div class="content-text">
                                        <h3>创新的交互体验</h3>
                                        <p>多子页面画廊，可展开组件，充分利用HTML的交互优势。</p>
                                    </div>
                                </div>
                                <div class="content-item">
                                    <span class="content-icon">🤖</span>
                                    <div class="content-text">
                                        <h3>AI友好的架构</h3>
                                        <p>详细操作手册，明确修改规范，完美支持AI工具快速定制。</p>
                                    </div>
                                </div>
                            </div>
                            
                            <h2 class="section-title editable" data-field="section-title-3b">如何使用这个工具</h2>
                            <div class="text-content editable" data-field="text-content-3b">
                                <div class="content-item">
                                    <span class="content-icon">📥</span>
                                    <div class="content-text">
                                        <h3>Git Clone 获取项目</h3>
                                        <p>从GitHub克隆这个项目到本地，所有文件都已准备就绪。</p>
                                    </div>
                                </div>
                                <div class="content-item">
                                    <span class="content-icon">🤖</span>
                                    <div class="content-text">
                                        <h3>使用AI工具定制</h3>
                                        <p>用Claude、Cursor等AI工具，按照操作手册修改内容，生成专属PPT。</p>
                                    </div>
                                </div>
                                <div class="content-item">
                                    <span class="content-icon">🎯</span>
                                    <div class="content-text">
                                        <h3>专注内容创作</h3>
                                        <p>版式已经设计完成，你只需要专注于讲好自己的项目故事。</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="interactive-components">
                        <div class="component-gallery">
                            <div class="gallery-header">使用指南</div>
                            <div class="gallery-content">
                                <div class="gallery-item active" data-index="0">
                                    <div class="gallery-text-content">
                                        <h4>📋 Step 1</h4>
                                        <p>git clone 项目<br/>获取完整源码<br/>本地运行查看</p>
                                    </div>
                                </div>
                                <div class="gallery-item" data-index="1">
                                    <div class="gallery-text-content">
                                        <h4>✏️ Step 2</h4>
                                        <p>使用AI工具修改<br/>参考操作手册<br/>替换为你的内容</p>
                                    </div>
                                </div>
                                <div class="gallery-item" data-index="2">
                                    <div class="gallery-text-content">
                                        <h4>🚀 Step 3</h4>
                                        <p>部署到云端<br/>分享给观众<br/>完成精彩路演</p>
                                    </div>
                                </div>
                            </div>
                            <div class="gallery-controls">
                                <button class="gallery-btn prev">‹</button>
                                <div class="gallery-indicators">
                                    <span class="indicator active" data-index="0"></span>
                                    <span class="indicator" data-index="1"></span>
                                    <span class="indicator" data-index="2"></span>
                                </div>
                                <button class="gallery-btn next">›</button>
                            </div>
                        </div>
                        <div class="expandable-widget">
                            <div class="widget-header">
                                <span class="widget-title">获取项目</span>
                                <button class="expand-btn" onclick="toggleExpand(this)">🔍</button>
                            </div>
                            <div class="widget-content">
                                <div class="contact-info">
                                    <div class="contact-item">
                                        <span class="contact-icon">🐱</span>
                                        <span>GitHub: html-ppt-template</span>
                                    </div>
                                    <div class="contact-item">
                                        <span class="contact-icon">📖</span>
                                        <span>详细文档: README.md</span>
                                    </div>
                                    <div class="contact-item">
                                        <span class="contact-icon">🤖</span>
                                        <span>AI手册: AI_OPERATION_MANUAL.md</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 导航指示器 -->
    <div class="slide-indicator">
        <span class="indicator-dot active" data-slide="1"></span>
        <span class="indicator-dot" data-slide="2"></span>
        <span class="indicator-dot" data-slide="3"></span>
    </div>

    <!-- 导航提示 -->
    <div class="navigation-hint">
        <p>使用 ← → 键或鼠标点击翻页</p>
    </div>

    <script src="script.js"></script>
</body>
</html>


